<template>
	<div class="app-contain">
		<article class="uc-m-content mb50">
			<div class="i-box mt20">
				<section class="plan-info-box">
					<h3> 
						<span class="c-333 fsize20 vam">{{planInfo.name}}</span> 
						<span class="plan-state c-green ml15" v-show="!planInfo.finish">进行中</span>
						<span class="plan-state c-red ml15" v-show="planInfo.finish">已完成</span> 
					</h3>
					<section class="c-666 mt10 fsize14"> 时间：{{planInfo.starttime}} ~ {{planInfo.endtime}}</section>
					<section class="hLh30 c-666 mt5 fsize14"> <span><span class="vam">通过后获得学分：</span><tt class="c-333 f-fM">{{planInfo.credit}}学分</tt></span>
					</section>
				</section>
			</div>
			<div class="i-box mt20 u-plan-wrap">
				<header class="u-header-title">
					<a :class="headerTitle == 'content'?'current':''" href="javascript:;" @click="headerTitle = 'content'">任务内容</a>
					<a :class="headerTitle == 'introd'?'current':''" class="not-curr" href="javascript:void(0)" @click="headerTitle = 'introd'">任务简介</a>
				</header>
				<section class="c-learn-plan mt10">
					<div class="p-l-wrap" v-show="headerTitle == 'content'">
						<article class="s-record-wrap s-plan-record">
							<section class="s-r-top"></section>
							<div class="pb15 study-list-item">
								<article class=" s-p-wrap">
									<aside class="s-p-type s-p-start"><span class="c-master mr8 fsize12 vam">开始</span> <em class="vam s-r-start"> </em></aside>
									<p class="s-p-name"></p>
								</article>
							</div>
							<div class="pt10 study-list-item" v-for="item in planInfo.taskItemList">
								<article class="mt20 s-p-wrap" v-if="item.type == 'EXAM'">
									<aside class="s-p-type"><span class="c-999 mr10 fsize12 vam">考试</span> <em class="s-r-c-t vam"> </em></aside>
									<p class="s-p-name">{{item.name}}</p>
									<p class="hLh30 c-999" v-show="item.finish">已完成</p>
									<div class="e-m-more"> 
										<a href="javascript:;" @click="toExam(item)" v-show="!item.finish">进入考试</a>
										<a href="javascript:;" @click="lookResult(item.itemId)" v-show="item.finish">查看报告</a>
									</div>
								</article>
								<article class="mt20 s-p-wrap" v-if="item.type == 'COURSE'">
									<aside class="s-p-type"><span class="c-999 mr10 fsize12 vam">课程</span> <em class="s-r-c-t vam"> </em></aside>
									<p class="s-p-name" >{{item.name}}</p>
									<p class="hLh30 c-999" v-show="item.finish">已学完</p>
									<div class="e-m-more">
										<a href="javascript:;" @click="lookCourse(item)"> 开始学习 </a>
									</div>
								</article>
								<!--<article class="mt20 s-p-wrap" v-if="item.type == 'LIVE'">
									<aside class="s-p-type"><span class="c-999 mr10 fsize12 vam">直播</span> <em class="s-r-c-t vam"> </em></aside>
									<p class="s-p-name">{{item.name}}</p>
									<p class="hLh30 c-999" v-show="item.finish">已完成</p>
									<div class="e-m-more"> 
											<a href="javascript:;" @click="lookLive(item)"> 进入直播 </a>
									</div>
								</article>-->
							</div>
							
							<div class=" study-list-item">
								<article class=" s-p-wrap">
									<aside class="s-p-type s-p-finish"><span class="c-999 mr10 fsize12 vam">结束</span> <em class="s-r-c-t vam s-r-c-finish"> </em> </aside>
								</article>
							</div>
						</article>
					</div>
					<div v-show="headerTitle == 'introd'">
						<div v-html="planInfo.info"></div>
					</div>
					
				</section>
			</div>
		</article>
	</div>
</template>

<script>
	import { getTaskInfo, } from '@/api/uc'
	import {getCourseInfo} from '@/api/course'
	export default {
		name: 'planInfo',
		data() {
			return {
				planInfo:{},
				headerTitle:"content"
			}
			
		},
		computed: {
			getUserInfo() {
				return this.$store.getters.getStorageInfo;
			}
		},
		created(){
			let query = this.$route.query;
			let data ={
				userId:this.getUserInfo.id,
				taskId:query.id
			}
			this.getTaskInfo(data);
		},
		methods:{
			getTaskInfo(data){
				getTaskInfo(data).then((res)=>{
					this.planInfo = res.entity;
				})
			},
			lookCourse(val){
				this.$router.push({
					path: '/courseInfo',
					query: {
						id: val.itemId,
						type:val.type,
					}
				});
			},
			toExam(item){
				this.$router.push({
					path: '/exam',
					query: {
						taskId: item.taskId,
						itemId: item.id,
						paperId: item.itemId,
						name:this.planInfo.name,
						type:'TASK'
					}
				})
			},
			lookResult(id){
				this.$router.push({
					path: '/paperResults',
					query: {
						examId:id,
						type:'TASK'
					}
				})
			},
			/*lookLive(item){//进入直播
				getCourseInfo(item.itemId, this.getUserInfo.id).then((res) => {
					let courseInfo = res.entity.course;
					let query = {
						roomCode: courseInfo.roomCode,
						roomId:courseInfo.roomId,
						type:'playing'
					};
					this.$router.push({
						path: '/liveRoom',
						query: query
					});
				})
				

				
			}*/
		}
	}
</script>

<style scoped lang="scss">
	@import '../../assets/style/uCenter-nxb.scss'
</style>